 <template>
	<div>
		<!-- 横向分布 justify-content:flex-start-->
		<!-- 纵向居中align-items:center -->
		<div style="z-index: 2;display: flex;justify-content: flex-start;
			background-color: rgb(243, 244, 246);
			height: 11%;
			position: fixed;top: 0;left: 0;width: 100%;
			border-bottom:0.5px solid #c3b2bb;align-items: center;">
			<div style="font-size: 20px;margin-left: 0px;height: 11vh;
			text-align: center;width: 100px;line-height: 11vh;
			cursor: pointer;" @click="gotoHome()">Aria</div>
			<form
				style="display: flex;align-items: center;margin-left: 150px;height: 11vh;display: flex;justify-content: flex-start;">
				<div class="inputBox">
					<input id="inputtop" type="text" placeholder="">
				</div>
				<span style="width: 10px;"></span>
				<div class="inputBox">
					<input type="submit" value="检索">
				</div>
			</form>
			<span style="width: 20%;"></span>
			<div style="height: 11vh;align-items: center;line-height: 11vh;">{{this.$store.state.borderflag}}</div>
			<span style="width: 5%;"></span>
			<div style="line-height: 11vh;">欢迎，xxx</div>a
			<button class="logout" style="height: 40px;position: absolute;right:30px;">退出登录</button>
		</div>
		<div class="shell" style="top: 8%;z-index: 1;position: fixed;left:0" @mouseover="changeflag(true)"
			@mouseout="changeflag(false)">
			<a class="box"><span></span></a>
			<a style="cursor: pointer;" class="box" @click="gotoMsg()"><i
					class="el-icon-user-solid"></i><span>个人信息</span></a>
			<a style="cursor: pointer;" class="box" @click="gotoColl()"><i
					class="el-icon-star-on"></i><span>关注/收藏</span></a>
			<a style="cursor: pointer;" class="box"><i class="el-icon-message-solid"></i><span>消息中心</span></a>
			<a style="cursor: pointer;" class="box"><i class="el-icon-s-platform"></i><span>最近浏览</span></a>
			<a style="cursor: pointer;" class="box"><i class="el-icon-s-flag"></i><span>门户系统</span></a>
		</div>
		<!-- <div style="
		border:solid;height:89%;
		position: absolute;
		margin-top: 4.7%;" 
		:class="{onleft:this.$store.state.divflag,onright:!this.$store.state.divflag}">
			asdfdasf
		</div> -->
		<router-view />
	</div>
	<!-- <div style="width: 13%;background-color: #f1f2f5;height: 100%;float: left;cursor:pointer;position: fixed;top: 0;left: 0;">&nbsp;</div> -->

</template>

<script>
	export default {
		methods: {
			gotoHome(){
					this.$router.push('/')
			},
			clickinput() { //onfocus
				document.getElementById("inputtop").placeHolder = "";
			},
			outinput() { //onblur
				document.getElementById("inputtop").placeHolder = "请输入内容"
			},
			gotoMsg() {
				this.$router.push('/personalpage/');
        localStorage.setItem("show_num", "1");
			},
			gotoColl() {
				this.$router.push('/personalpage/personalcollect');
        localStorage.setItem("show_num", "2");
			},
			changeflag(flag) {
				if (flag === true) {
					this.$store.state.divflag = false;
				} else {
					this.$store.state.divflag = true;
				}
			}
		}
	};
</script>

<style>
	.onleft {
		margin-left: 6.5%;
		width: 93.5%
	}

	.onright {
		margin-left: 17%;
		width: 83%
	}

	.shell {
		position: absolute;
		left: 0;
		width: 6.5%;
		height: 75vh;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background-color: rgb(17, 24, 39);
		border-top-left-radius: 0em;
		border-top-right-radius: 0em;
		border-bottom-right-radius: 1em;
		border-bottom-left-radius: 1em;
		transition: .3s;
		overflow: hidden;
	}

	.box {
		height: 1%;
		width: 85%;
	}

	.box {
		display: block;
		justify-content: center;
		align-items: center;
		height: 15%;
		width: 85%;
		margin: 9px;
		border-radius: 5px;
		position: relative;
		transition: .3s;
		color: rgb(160, 160, 175);
	}

	.box i {
		font-size: 30px;
		position: absolute;
		margin: 15px 0 0 20px;
		/* margin-left: 30%;
		margin-top: 30%; */
	}

	.box:nth-child(1) {
		height: 0px;
	}

	.box:nth-child(1)::after,
	.box:nth-child(5)::before {
		content: '';
		display: block;
		width: 100%;
		height: 2px;
		background-color: rgb(55, 65, 81);
		position: absolute;
		bottom: -10px;
	}

	.box span {
		position: relative;
		top: 30%;
		left: 40%;
		font-size: 15px;
		opacity: 0;
		transition: .1s;
	}

	.shell:hover {
		width: 17%;
	}

	.shell:hover .contain {
		margin-left: 200px;
	}

	.box:hover {
		background-color: rgb(55, 65, 81);
	}

	.shell:hover span {
		opacity: 1;
	}

	.box:hover {
		color: #fff;
	}

	.shell:nth-child(2) {
		background-color: rgb(243, 244, 246);
	}

	.shell:nth-child(2) .box:hover {
		background-color: rgb(209, 213, 219);
		color: rgb(135, 140, 241);
	}

	.shell:nth-child(2) .box {
		color: #000;
	}

	.shell:nth-child(3) {
		background-color: rgb(49, 46, 129);
	}

	.shell:nth-child(3) .box:hover {
		background-color: rgb(67, 56, 202);
	}

	.shell:nth-child(3) .box {
		color: rgb(140, 120, 240);
	}

	.inputBox input {
		width: 100%;
		padding: 10px 20px;
		background: rgba(91, 91, 91, 0.2);
		outline: none;
		border: none;
		border-radius: 30px;
		border: 1px solid rgba(255, 255, 255, 0.5);
		border-right: 1px solid rgba(255, 255, 255, 0.2);
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		font-size: 16px;
		letter-spacing: 1px;
		color: #191919;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
	}

	.inputBox input:nth-child(2) {
		justify-content: center;
		align-items: center;
	}

	.inputBox input::placeholder {
		color: #191919;
	}

	.inputBox input[type="submit"] {
		background: #fff;
		color: #666;
		width: 75px;

		/* margin-bottom: 20px; */
		font-weight: 600;
		cursor: pointer;
	}

	.logout {
		background: rgba(91, 91, 91, 0.2);
		outline: none;
		border: none;
		border-radius: 30px;
		border: 1px solid rgba(255, 255, 255, 0.5);
		border-right: 1px solid rgba(255, 255, 255, 0.2);
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		font-size: 16px;
		letter-spacing: 1px;
		color: #191919;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
		background: #fff;
		color: #666;
		width: 100px;
		/* margin-bottom: 20px; */
		font-weight: 600;
		cursor: pointer;
	}
</style>
